<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="/static/img/logo/logo.png" rel="icon">
    <title>RuangAdmin - Register</title>
    <link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/ruang-admin.min.css" rel="stylesheet">

</head>

<body class="bg-gradient-login">
<!-- Register Content -->
<div class="container-login" style="height:600px;margin-top: 100px;">
    <div class="row justify-content-center">
        <div class="col-xl-10 col-lg-12 col-md-9">
            <div class="card shadow-sm my-5" style="width: 450px; margin: 0px auto 0px auto">
                <div class="card-body p-0">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="login-form">
                                <div class="text-center">
                                    <h1 class="h4 text-gray-900 mb-4">Serverless Platform - Register</h1>
                                </div>
                                <form action="/login/registerUser/" method="post">
                                    {% csrf_token %}
                                    <div class="form-group">
                                        <label>Username</label>
                                        <input type="text" class="form-control" id="username" name="username"
                                               placeholder="Enter Username" required autofocus onblur="checkUsername()">
                                    </div>
                                    <div class="form-group">
                                        <label>Email</label>
                                        <input type="email" class="form-control" id="email" aria-describedby="emailHelp"
                                               name="email"
                                               placeholder="Enter Email Address" required>
                                    </div>
                                    <div class="form-group">
                                        <label>Password</label>
                                        <input type="password" class="form-control" id="password" placeholder="Password"
                                               name="password"
                                               required>
                                    </div>
                                    <div class="form-group">
                                        <label>Repeat Password</label>
                                        <input type="password" class="form-control" id="repassword" name="repassword"
                                               placeholder="Repeat Password" required onblur="checkRepeatPassword()"
                                               autofocus>
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-primary btn-block">Register</button>
                                    </div>
                                    <hr>
                                </form>
                                <hr>
                                <div class="text-center">
                                    <a class="font-weight-bold small" href="/login">Already have an account?</a>
                                </div>
                                <div class="text-center">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Register Content -->
<script src="/static/vendor/jquery/jquery.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="/static/js/ruang-admin.min.js"></script>

<script>

    function checkRepeatPassword() {
        const passwdBox = document.getElementById('repassword')
        const passwd = document.getElementById('password').value
        const repasswd = document.getElementById('repassword').value
        if (passwd === repasswd) {
            passwdBox.setCustomValidity("")
        } else {
            passwdBox.setCustomValidity("The two passwords you entered were inconsistent")
        }

    }

    function checkUsername() {
        $.get("/login/check_username_is_exist", {username: document.getElementById('username').value}, function (res) {
            const usernameBox = document.getElementById('username')
            if (res["result"]) {
                usernameBox.setCustomValidity("The username already exists. Change it")
            } else {
                usernameBox.setCustomValidity("")
            }
        })
    }

</script>
</body>

</html>